/*
 * @Author: yangzonglong
 * @Date: 2021-05-17 14:23:24
 * @version: v1.0.0
 * @Descripttion: 通知模板
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-05-17 14:35:51
 * @Auditor: 
 */
import React, { useState, useCallback, useContext, useEffect } from 'react';
import { Form, Input } from 'antd';
import context from '../context';
import { ReceiveTaskProps } from './../../../interface';

const T = window.$app.t;

export default () => {
  const { self, modeler } = useContext(context);
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const _self = self as ReceiveTaskProps;

  useEffect(() => {
    const informTitle = _self.businessObject?.informTitle;
    const informContent = _self.businessObject?.informContent;
    setTitle(informTitle || '');
    setContent(informContent || '');
  }, [_self]);

  const onChangeTitle = useCallback((e: React.BaseSyntheticEvent) => {
    setTitle(e.target.value);
    modeler.get('modeling').updateProperties(self, {
      informTitle: e.target.value
    })
  }, [self, modeler]);

  const onChangeContent = useCallback((e: React.BaseSyntheticEvent) => {
    setContent(e.target.value);
    modeler.get('modeling').updateProperties(self, {
      informContent: e.target.value
    })
  }, [self, modeler]);

  return (
    <Form layout='vertical'>
      <Form.Item label={T('title')} required>
        <Input value={title} onChange={onChangeTitle} placeholder={T('pleaseInputTextVar')}/>
      </Form.Item>
      <Form.Item label={T('maintext')} required>
        <Input.TextArea onChange={onChangeContent} rows={8} placeholder={T('pleaseInputTextVar')} value={content}/>
      </Form.Item>
    </Form>
  )
}
